<template>
	<view class="index-section">
		<tit tit="享活动" url="/pages/tabBar/shareActive" />
		<view class="clickableInfo">
			<clickBtn :tabList="tabList"  @cur="cur"/>
		</view>
		<view class="main">
			<contentsInfo :list="contentList" url="/pages/home/activityDetail"/>
			<view style="width: 100%; text-align: center; font-size: 28rpx; margin-top: 10rpx;">{{isText}}</view>
		</view>
	</view>
</template>

<script>
	import tit from '@/pages/index/cpns/title.vue';
	import clickBtn from '@/pages/index/cpns/clickBtn.vue';
	import contentsInfo from '@/pages/index/cpns/contentsInfo.vue';
	import { actList,actCategory } from "@/request/homeApi.js"

	export default {
		components: {
			tit,
			clickBtn,
			contentsInfo
		},
		data() {
			return {
				tabList: [],
				contentList:[],
				activity_category_id:1,
				isText:''
			};
		},
		mounted() {
			this.getCategory()
			this.getList()
		},
		methods:{
			cur(e){
				this.activity_category_id = e
				this.getList()
			},
			getCategory(){
				let that = this
				actCategory().then(res => {
					that.tabList = res.data
				})
			},
			getList(){
				let that = this
				actList({
					activity_category_id: that.activity_category_id,
					page:1,
					limit:2,
					title:'',
					type:'',
					recommend:2
				}).then(res => {
					that.contentList = res.data.list
					res.data.count == 0 ? that.isText = '暂无活动' : that.isText = ''
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.index-section {
		padding: 20rpx;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		background-color: #fff;
		.clickableInfo{
			margin: 20rpx 0;
		}

	}
</style>